<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料 - 回声网络</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", sans-serif; }
        body { background-color: #f5f7fa; }
        /* 顶部导航栏 */
        .nav { width: 100%; height: 60px; background-color: #2c3e50; display: flex; align-items: center; padding: 0 50px; }
        .nav-logo { color: white; font-size: 22px; font-weight: bold; text-decoration: none; margin-right: 50px; }
        .nav-menu { display: flex; gap: 30px; }
        .nav-menu a { color: #ecf0f1; text-decoration: none; font-size: 16px; }
        .nav-menu a:hover { color: #3498db; }
        .nav-user { margin-left: auto; color: white; display: flex; align-items: center; gap: 15px; }
        .nav-user a { color: white; text-decoration: none; }
        /* 资料卡片容器 */
        .profile-container { width: 800px; margin: 50px auto; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
        /* 头像区域 */
        .profile-header { background-color: #3498db; padding: 40px 0; text-align: center; color: white; }
        .avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid white; object-fit: cover; margin-bottom: 15px; }
        .nickname { font-size: 24px; font-weight: bold; margin-bottom: 5px; }
        .username { font-size: 14px; opacity: 0.8; }
        /* 资料详情区域 */
        .profile-body { padding: 30px 50px; }
        .profile-item { display: flex; align-items: center; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #f0f0f0; }
        .profile-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
        .item-label { width: 120px; font-size: 16px; color: #666; font-weight: 500; }
        .item-value { font-size: 16px; color: #333; flex: 1; }
        /* 操作按钮 */
        .profile-actions { text-align: center; margin-top: 30px; padding-bottom: 30px; }
        .btn-edit { display: inline-block; padding: 10px 30px; background-color: #3498db; color: white; border-radius: 4px; text-decoration: none; font-size: 16px; }
        .btn-edit:hover { background-color: #2980b9; }
        /* 错误提示 */
        .error-container { text-align: center; padding: 100px 0; color: #e74c3c; font-size: 18px; }
        .btn-back { display: inline-block; margin-top: 20px; padding: 10px 25px; background-color: #2c3e50; color: white; border-radius: 4px; text-decoration: none; }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="nav">
    <a href="/echo-network/article-list.html" class="nav-logo">回声网络</a >
    <div class="nav-menu">
        <a href="/echo-network/article-list">首页</a >
        <a href="/echo-network/article-publish">发布文章</a >
        <a href="/echo-network/article-show">我的文章</a >
        <!-- 管理员专用的分类文章按钮 -->
        <a href="/echo-network/admin/categoryList.html" th:if="${session.loginUser != null && session.loginUser.role == 1}">分类文章</a >
        <!-- 管理员专用的文章管理按钮 -->
        <a href="/echo-network/admin/articleList.html" th:if="${session.loginUser != null && session.loginUser.role == 1}">文章管理</a >
        <a href="/echo-network/login.html">重新登录</a>
    </div>
    <div class="nav-user" th:if="${session.loginUser != null}">
        <span th:text="${session.loginUser.nickname}"></span>
        <a href="#" onclick="confirmLogout(event)">注销</a >
    </div>
    <div class="nav-user" th:if="${session.loginUser == null}">
        <a href="/login.html">登录</a >
        <a href="/register.html">注册</a >
    </div>
</nav>

<!-- 已登录：展示个人资料 -->
<div class="profile-container" th:if="${session.loginUser != null}">
    <!-- 成功消息提示 -->
    <div class="success-message" th:if="${successMsg != null}" style="background-color: #d4edda; color: #155724; padding: 15px; text-align: center; border-bottom: 1px solid #c3e6cb;">
        <span th:text="${successMsg}"></span>
    </div>
    
    <div class="profile-header">
        <!-- 头像：优先显示用户设置的头像，无则显示默认图 -->
        <img
        class="avatar"
        th:src="${user.avatar != null && user.avatar != '' ? user.avatar : './images/photo.jpg'}"
        style="width: 120px; height: 120px;object-fit: cover;"
        >
        <div class="nickname" th:text="${user.nickname}"></div>
        <div class="username">@[[${user.username}]]</div>
    </div>
    <div class="profile-body">
        <div class="profile-item">
            <div class="item-label">用户名：</div>
            <div class="item-value" th:text="${user.username}"></div>
        </div>
        <div class="profile-item">
            <div class="item-label">邮箱：</div>
            <div class="item-value" th:text="${user.email}"></div>
        </div>
        <div class="profile-item">
            <div class="item-label">注册时间：</div>
            <div class="item-value" th:text="${user.createTime}"></div>
        </div>
        <div class="profile-item">
            <div class="item-label">账号状态：</div>
            <div class="item-value" th:text="${user.status == 1 ? '正常' : '禁用'}"></div>
        </div>
    </div>
    <div class="profile-actions">
            <a href="/echo-network/profile/edit" class="btn-edit">修改个人资料</a >
        </div>
</div>

<!-- 未登录：显示错误提示 -->
<div class="error-container" th:if="${session.loginUser == null}">
    <p>请先登录后查看个人资料</p >
    <a href="/login.html" class="btn-back">前往登录</a >
</div>
    <script>
        function confirmLogout(event) {
            event.preventDefault();
            
            if (confirm('确定要注销当前账号吗？')) {
                // 不再使用localStorage记录状态，直接提交表单到LogoutServlet
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '/echo-network/logout';
                form.style.display = 'none';
                document.body.appendChild(form);
                form.submit();
            }
        }
        
        // 页面加载时检查URL中的logout参数（由LogoutServlet设置）
        document.addEventListener('DOMContentLoaded', function() {
            // 从当前URL获取参数
            const urlParams = new URLSearchParams(window.location.search);
            const logoutStatus = urlParams.get('logout');
            
            // 如果URL中有logout参数，显示相应的提示
            if (logoutStatus === 'success') {
                alert('注销成功！');
                // 重定向到登录页（可选，但可以确保用户看到登录界面）
                // window.location.href = '/echo-network/login.html';
            } else if (logoutStatus === 'fail') {
                alert('注销失败，请重试！');
            }
        });
    </script>
</body>
</html>